/*
 * 
 * 　　┏┓　　　┏┓+ +
 * 　┏┛┻━━━┛┻┓ + +
 * 　┃　　　　　　　┃ 　
 * 　┃　　　━　　　┃ ++ + + +
 *  ████━████ ┃+
 * 　┃　　　　　　　┃ +
 * 　┃　　　┻　　　┃
 * 　┃　　　　　　　┃ + +
 * 　┗━┓　　　┏━┛
 * 　　　┃　　　┃　　　　　　　　　　　
 * 　　　┃　　　┃ + + + +
 * 　　　┃　　　┃
 * 　　　┃　　　┃ +  神兽保佑
 * 　　　┃　　　┃    代码无bug　　
 * 　　　┃　　　┃　　+　　　　　　　　　
 * 　　　┃　 　　┗━━━┓ + +
 * 　　　┃ 　　　　　　　┣┓
 * 　　　┃ 　　　　　　　┏┛
 * 　　　┗┓┓┏━┳┓┏┛ + + + +
 * 　　　　┃┫┫　┃┫┫
 * 　　　　┗┻┛　┗┻┛+ + + +
 * 
 * 
 * @Descripttion: 
 * @version: 
 * @Author: vai-bowei
 * @Date: 2021-10-15 15:12:46
 * @LastEditors: vai-bowei
 * @LastEditTime: 2021-10-19 21:38:56
 */

/*
 * 
 * 　　┏┓　　　┏┓+ +
 * 　┏┛┻━━━┛┻┓ + +
 * 　┃　　　　　　　┃ 　
 * 　┃　　　━　　　┃ ++ + + +
 *  ████━████ ┃+
 * 　┃　　　　　　　┃ +
 * 　┃　　　┻　　　┃
 * 　┃　　　　　　　┃ + +
 * 　┗━┓　　　┏━┛
 * 　　　┃　　　┃　　　　　　　　　　　
 * 　　　┃　　　┃ + + + +
 * 　　　┃　　　┃
 * 　　　┃　　　┃ +  神兽保佑
 * 　　　┃　　　┃    代码无bug　　
 * 　　　┃　　　┃　　+　　　　　　　　　
 * 　　　┃　 　　┗━━━┓ + +
 * 　　　┃ 　　　　　　　┣┓
 * 　　　┃ 　　　　　　　┏┛
 * 　　　┗┓┓┏━┳┓┏┛ + + + +
 * 　　　　┃┫┫　┃┫┫
 * 　　　　┗┻┛　┗┻┛+ + + +
 * 
 * 
 * @Descripttion: 
 * @version: 
 * @Author: vai-bowei
 * @Date: 2021-10-15 15:12:46
 * @LastEditors: vai-bowei
 * @LastEditTime: 2021-10-15 15:13:15
 */

import { Component } from 'react'
import { View, Image, Text } from '@tarojs/components'
// import {AtSwitch, AtForm} from 'taro-ui'
import './index.scss'

export default class LgLeftTarBarItem extends Component {
    constructor () {
      super(...arguments)
      this.triggerState = this.triggerState.bind(this);
    }
    state = {
    }
    triggerState(){
        this.props.triggerState && this.props.triggerState(this.props.index)
    }
    render(){
        const { title, secondTitle, isSelected, selectedTitleColor, selectedSecTitleColor  } = this.props.data || {}
        , index = this.props.index || ''
        //标题判断
        , showTitle = title ||  ('标题'+(index+1)) // 默认标题1起
        , showClassName = isSelected ? ' tarbar_item_cho' : ''
        , showTitleSty = isSelected ? { color:selectedTitleColor || 'rgb(88,88,88)'} : {}
        , showSecTitleSty = {
            display:secondTitle?'block':'none',
            color:isSelected ? selectedSecTitleColor : 'rgb(52,52,52)'
        }
        return (
            <View className={'tarbar_item'+showClassName} onClick={this.triggerState}>
                <View className="tarbar_item_title oneline" style={ showTitleSty }>{title}</View>
                <View className="tarbar_item_sectitle oneline" style={ showSecTitleSty }>{secondTitle}</View>
            </View>
        )
    }
}